<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 页面元素标签是可以通过JS内置的功能方法，进行动态创建删除和添加替换操作的
        window.onload = function(){
            // createElement("tagName") 通过传入的字符串标签名，创建新的标签元素
            console.log( document.createElement );
            // 以body元素为例
            // appendChild(DOM)  在指定的元素内部的末尾，以子元素的方式增加新的DOM对象
            console.log( document.body.appendChild );
            // removeChild(DOM) 在指定的元素内部找到对应的DOM对象，进行删除操作
            console.log( document.body.removeChild );
            // replaceChild(newDom,oldDom)  在指定的元素内部找到对应的DOM对象，并替换成新的对象
            console.log( document.body.replaceChild );
        }
        function createH1Dom(){
            let h1Dom = document.createElement("h1");
            h1Dom.innerHTML = "元素内容";
            h1Dom.style.color = "red";
            console.log(h1Dom);

            // 方法创建的元素是JS中对象数据，直接调用write会被转换字符串
            // console.log(h1Dom.toString());
            // document.write(h1Dom);
            document.body.appendChild(h1Dom);
        }
        function createDomToDiv(){
            let h1Dom = document.createElement("h1");
            h1Dom.style.color = "blue";
            h1Dom.innerHTML = "div的子元素";
            // 先获取id=box的元素
            let boxDom = document.querySelector("#box");
            // 在boxDom的末尾怎加一个新的h1子元素
            boxDom.appendChild(h1Dom);
        }

        function removeDom(){
            // 1 获取需要删除子元素的DOM对象
            let ulDom = document.querySelector("#ul");
            // 2 获取需要被删除的子元素DOM对象
            let liDom = document.querySelector("#li");
            // 3 删除元素
            ulDom.removeChild(liDom);
        }
        function replaceDom(){
            // 1 获取需要删除子元素的DOM对象
            let ulDom = document.querySelector("#ul");
            // 2 获取被替换的子元素DOM对象
            let infoDom = document.querySelector("#info");
            // 3 创建一个新的元素
            let divDom = document.createElement("div");
            divDom.innerHTML = "新元素";
            divDom.style.color = "red";
            divDom.classList.add("title");
            // 替换
            ulDom.replaceChild(divDom,infoDom);
        }
    </script>
</head>
<body>
    <input type="button" value="创建h1元素" onclick="createH1Dom()">
    <input type="button" value="创建h1元素并添加到DIV" onclick="createDomToDiv()">
    <hr>
    <div id="box" style="border: 1px solid black;"></div>
    <hr>
    <ul id="ul">
        <li>元素1</li>
        <li>元素2</li>
        <li id="li">元素3</li>
        <li>元素4</li>
        <li id="info">元素5</li>
        <li>元素6</li>
    </ul>
    <input type="button" value="删除id=li的元素" onclick="removeDom()">
    <br>
    <input type="button" value="替换id=info的元素" onclick="replaceDom()">

</body>
</html>